<template>
	<!-- D:/project/app/ydz-app-uniapp/static/images/knowledge/clinicaldetail -->
	<view class="pagebody">
		<view class="bgfff">
			<view class="topbox">
				<TopSearch :keys="keywords"></TopSearch>
			</view>
		</view>
		<!-- 		<view v-show="keywords.length==0" class="choosebox">
			 <view class="itembox">
 				<view @click="todispage"  style="color: #303B39; background: #FFFFFF; " class="item">请选择您的疾病 ></view>
			</view>
		</view> -->
		<view v-if="keywords.length==0" class="fz40" style="display: flex; align-items: center;color: #303B39;font-weight: 800;background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);padding: 30rpx 24rpx 0;
border-radius: 0px 0px 32rpx 32rpx; ">
			<view style="width: 8rpx;height: 40rpx;background: #00D9B2;margin-right: 8rpx;"></view> {{disease.name}}药品
			<span style="font-weight: 800;
			margin-left: 8rpx;
			font-size: 28rpx;
			font-weight: 800;
			color: #576260;">共{{total}}个药</span>
		</view>
		<view v-else class="fz40" style="color: #00977C;font-weight: 800; margin: 12rpx 24rpx; ">
			“{{keywords}}”相关药品
		</view>
		<view class="" style="padding: 0 24rpx;">
			<consulting></consulting>
		</view>

		<view class="druglist">
			<DrugList :drugList="drugList"></DrugList>
			<!-- 分页器pager -->
			<!-- 			<uni-pagination title="这是title" show-icon="true" :pageSize="pagesize" :total="total" :current="page"
				@change="changepage"></uni-pagination> -->
				
				<view class="pagebox">
					<!-- 统一分页器 -->
					<view class="thepager justify-between align-center">
						<view @click="tonewpage(1)" class="pagebtn" :class="page!=1?'havepage':''">
							上一页
						</view>
						<view class="pageNm">
							<span class="nowpage">{{page}}</span> <span style="margin: 0 8rpx;">/</span>{{pages}}
						</view>
						<view @click="tonewpage(2)" class="pagebtn" :class="page<pages?'havepage':''">
							下一页
						</view>
					</view>
				</view>

		</view>
		<AdvCom :type='2'></AdvCom>
		<typenews :type="2" :disname="disease.name" :disid="userDocument.diseaseId" :list="znNewsList"></typenews>
		<AdvCom :type='4'></AdvCom>
		<typenews :type="1" :disname="disease.name" :disid="userDocument.diseaseId" :list="zsNewsList"></typenews>
		<view class="" style="height: 126rpx; margin-top: 17rpx;">
			<community></community>
		</view>
		<AboutClinical v-show="keywords.length==0" :clinicalList="clinicalList"></AboutClinical>
		<HotnewsCom></HotnewsCom>


		<FixedFoot :typeid="2"></FixedFoot>
	</view>
</template>

<script>
	import FixedFoot from '../../layouts/fixedfoot.vue';
	import TopSearch from '../../layouts/topsearch.vue';
	import AdvCom from '../../layouts/advcome.vue';
	import AboutClinical from '../../components/generalcom/aboutclinical.vue';
	import DrugList from '../../components/generalcom/druglist.vue';
	import typenews from '../../components/generalcom/typenews.vue';
	import HotnewsCom from '../../components/generalcom/hotnewcom.vue';
	import consulting from '../../components/generalcom/consulting.vue'
	import community from '../../components/generalcom/community.vue'
	import config from '@/config'
	import {
		getDiseaseById,
		getDrugList,
		getClinicalList,
		selectDrugList,
		getdisNewsList,
		selectNewsList,
		getotherlist
	} from '@/api/api.js'
	import {
		getInfo
	} from '@/api/login'
	export default {
		components: {
			FixedFoot,
			TopSearch,
			AboutClinical,
			DrugList,
			AdvCom,
			typenews,
			HotnewsCom,
			consulting,
			community
		},

		data() {
			return {
				baseUrl: config.baseUrl,
				keywords: '',
				page: 1,
				pageSize: 10,
				total: 50,
				pages:0,
				disease: {},
				userDocument: {},
				drugList: [],
				diseaseList: [],
				clinicalList: [],
				zsNewsList: [],
				znNewsList: [],
				newsList: [],
			}
		},
		onShow() {
			uni.$on('returnData', (data) => {
				//触发更新后
				this.changeid(data)
			})
		},
		created() {
			this.getUser()
		},
		onUnload() {
			uni.$off('returnData');
		},
		onLoad(option) {
			if (option.id) {
				this.getDiseaseById(option.id)
			} else if (option.keywords) {
				this.getKeydrug(option.keywords)
			}
		},
		methods: {
			getUser() {
				getInfo().then(res => {
					this.userDocument = res.userDocument
					this.zsSelectNewsList()
					this.znSelectNewsList()
				})
			},
			//疾病知识文章
			zsSelectNewsList() {
				let param = {
					"pageNum": 1,
					"pageSize": 5,
					"type": "02",
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
				}
				if(this.disease.pid == 0){
					param.pid = this.disease.id
				}else{
					param.diseaseId = this.disease.id
				}
				getotherlist(param).then(response => {
					this.zsNewsList = response.rows
				})
			},
			//疾病指南文章
			znSelectNewsList() {
				let param = {
					"pageNum": 1,
					"pageSize": 5,
					"type": "01",
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
				}
				if(this.disease.pid == 0){
					param.pid = this.disease.id
				}else{
					param.diseaseId = this.disease.id
				}
				getotherlist(param).then(response => {
					this.znNewsList = response.rows
				})
			},
			getDiseaseById(id) {
				getDiseaseById(id).then(res => {
					if (200 == res.code) {
						this.disease = res.data
						let dis = {}
						if(this.disease.pid == 0){
							dis = {
								"pid": this.disease.id
							}
						}else{
							dis = {
								"diseaseId": this.disease.id
							}
						}
						this.diseaseList = []
						this.diseaseList.push(dis);
						this.selectClinicalList();
						this.getDrugList();
					}
				})
			},
			getKeydrug(key) {
				this.keywords = key
				let data = {
					name: this.keywords,
					"pageNum": this.page,
					"pageSize": 10,
				}
				selectDrugList(data).then(res => {
					this.drugList = res.rows
					this.total = res.total;
					this.pages = Math.ceil(this.total / this.pageSize)
				})

			},
			changeid(obj) {
				this.page = 1;
				this.disobj = obj
				let disease = {
					diseaseId: this.disobj.id
				}
				this.diseaseList = []
				this.diseaseList.push(disease);
				this.getDrugList();
				this.selectClinicalList();
			},
			changepage(e) {
				this.page = e.current
				this.getDrugList();
				this.topPage();
			},
			todispage() {
				uni.navigateTo({
					url: '/pages/knowledge/disease?druglist=1'
				})
			},
			topPage() {
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
					duration: 30 // 滚动动画的时长
				})
			},

			// 新分页器事件
			change(currentPage, type) { // 当前页改变
				this.page = currentPage;
				this.getDrugList();
				this.topPage();
			},
			sizeChange(pageSize) { // 每页条数改变
				this.pageSize = pageSize;
				console.log("每页", pageSize, "条");
			},
			changeTotal() { // 更改总条数
				this.total = 555
			},
			changeCurrentPage() { // 更改当前页
				this.page = 3
			},



			// 药品列表
			getDrugList() {
				console.log(this.diseaseList)
				let param = {
					"pageNum": this.page,
					"pageSize": 10,
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"drugDiseaseList": this.diseaseList.length > 0 ? this.diseaseList : null
				}

				getDrugList(param).then(res => {
					if (res.code == 200) {
						this.drugList = res.rows
						this.total = res.total;
						
						this.pages = Math.ceil(this.total / this.pageSize)
					}
				})
			},
			// 临床招募列表
			selectClinicalList() {
				let param = {
					"pageNum": 1,
					"pageSize": 4,
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"clinicalDiseaseList": this.diseaseList.length > 0 ? this.diseaseList : null
				}
				getClinicalList(param).then(res => {
					if (res.code == 200) {
						this.clinicalList = res.rows
					}
				})
			},
			// 统一分页器事件
			tonewpage(num) {
				if (num == 1) {
					if (this.page != 1) {
						this.page--
						if(this.keywords){
							this.getKeydrug(this.keywords)
						}else{
							this.getDrugList();
						}
						this.topPage();
					} else {
						return
					}
				} else {
					if (this.page < this.pages) {
						this.page++
						if(this.keywords){
							this.getKeydrug(this.keywords)
						}else{
							this.getDrugList();
						}
						this.topPage();
					} else {
						return
					}
				}
			},
		}

	}
</script>

<style lang="scss" scoped>

	.pagebody {
		padding-bottom: 136rpx;
		background: #F0F6F5;

		.topbox {
			padding: 20rpx 24rpx;
			background: linear-gradient(180deg, rgba(0, 217, 178, 0.25) 0%, rgba(0, 217, 178, 0) 100%);
		}

		.choosebox {
			background: #fff;
			padding: 32rpx 24rpx;
			border-radius: 0 0 32rpx 32rpx;

			.itembox {
				display: flex;

				flex-wrap: wrap;
				// margin-top: 32rpx;
				padding: 0 0 0 25rpx;

				.item {
					font-size: 34rpx;
					font-weight: bold;
					height: 64rpx;
					padding: 16rpx 32rpx;
					min-width: 203rpx;
					margin-right: 16rpx;
					margin-bottom: 16rpx;
					border-radius: 16rpx;
					border: 1rpx solid #D7DDDC;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.isitem {
					color: #00D9B2;
					border: 1rpx solid #00D9B2;
				}
			}
		}

		.druglist {
			padding: 0 26rpx;
			.pagebox {
				// background: #fff;
				// padding: 32rpx 24rpx;
				border-radius: 0 0 32rpx 32rpx;
			
				// 统一分页器样式
				.thepager {
					.pagebtn {
						width: 178rpx;
						height: 76rpx;
						border: 1px solid #B8C3C1;
						text-align: center;
						line-height: 76rpx;
						font-weight: 400;
						font-size: 32rpx;
						color: #303B39;
						background: #fff;
						border-radius: 24rpx;
					}
			
					.havepage {
						color: #00D9B2 !important;
						border-color: #00D9B2 !important;
					}
			
					.pageNm {
						font-weight: 400;
						font-size: 32rpx;
						color: #7E8987;
			
						.nowpage {
							color: #303B39;
			
						}
					}
			
				}
			}
		}
	}
</style>